<template>
  <div class="bar">
    <div class="f">
      <bar1 :id="'bar1'" style="width: 800px; height: 800px;"></bar1>
      <bar2 :id="'bar2'" style="width: 800px; height: 800px;"></bar2>
      <bar3 :id="'bar3'" style="width: 800px; height: 800px;"></bar3>
    </div>
    <div class="f" style="margin-top: -200px;">
      <bar4 :id="'bar4'" style="width: 800px; height: 800px;"></bar4>
      <bar5 :id="'bar5'" style="width: 800px; height: 800px;"></bar5>
      <bar6 :id="'bar6'" style="width: 800px; height: 800px;"></bar6>
    </div>
    <div class="f" style="margin-top: -300px;">
      <bar7 :id="'bar7'" style="width: 1000px; height: 500px;"></bar7>
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from "vue";
import bar1 from '@/components/bar/bar1.vue'
import bar2 from '@/components/bar/bar2.vue'
import bar3 from '@/components/bar/bar3.vue'
import bar4 from '@/components/bar/bar4.vue'
import bar5 from '@/components/bar/bar5.vue'
import bar6 from '@/components/bar/bar6.vue'
import bar7 from '@/components/bar/bar7.vue'
const state = reactive({
  optionData: [
    {
      name: "数据4",
      value: 10,
      h: 0
    },
    {
      name: "数据5",
      value: 20,
      h: 0,
      sliced: true
    }]
});
const { optionData } = state;

  
</script>

<style lang="less" scoped>
  .bar{
    width: 100%;
    height: auto;
    background: #0F0F1B;
    display: flex;
    flex-direction: column;
    padding-bottom: 200px;
  }
  
</style>